<template>
  <div class="app-container">
      <el-form ref="dataForm" :rules="rules" :model="serverForm" label-position="left" label-width="140px" style="width: 80%; margin-left:50px;">
        <el-form-item label="编码" prop="code">
          <el-input v-model="serverForm.code" />
        </el-form-item>
        <el-form-item label="地址" prop="host">
          <el-row :gutter="20">
            <el-col :span="10"><el-input v-model="serverForm.host" /></el-col>
            <el-col :span="2">端口：</el-col>
            <el-col :span="6"><el-input v-model="serverForm.port" /></el-col>
          </el-row>
          
        </el-form-item>
        <el-form-item label="参数">
          <el-input v-model="serverForm.setting" :autosize="{ minRows: 6, maxRows: 8}" type="textarea" />
        </el-form-item>
        <el-form-item label="URI地址" prop="url">
          <el-input v-model="serverForm.url" />
        </el-form-item>
        <el-form-item label="文件白名单">
          <el-input v-model="serverForm.allowedFileType" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" />
        </el-form-item>
        <el-form-item label="文件黑名单">
          <el-input v-model="serverForm.disabledFileType" :autosize="{ minRows: 2, maxRows: 8}" type="textarea" />
        </el-form-item>
        <el-form-item label="类型" prop="remote">
          <el-radio-group v-model="serverForm.remote">
            <el-radio :label="1">本地</el-radio>
            <el-radio :label="2">远程</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权重" prop="weight">
          <el-input-number v-model="serverForm.weight" :min="1" :max="10" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="目录" prop="folder">
          <el-input v-model="serverForm.folder" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="serverForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
      <el-button @click="handleCannel()">
        取消
      </el-button>
      <el-button type="primary" @click="createData()">
        确认
      </el-button>
      <el-button v-if="serverForm.ID > 0 && serverForm.status.value < 6" type="danger" @click="handleDelete(serverForm)">
        删除
      </el-button>
      </div>

  </div>
</template>

<script>
import { getServerList, removeServerByID, saveServer, changeServerStatusByID } from '@/api/attachment/server'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: { Pagination },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      serverForm: {
        id: undefined,
        remark: '',
        title: '',
        folder:"/",
        setting:"{}",
        weight:1,
        remote:"1",
        status: 6
      },
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      }
    }
  },
  created() {
    let serverID = this.$route.query && this.$route.query.serverID
    if (serverID !== undefined) {
      serverID = parseInt(serverID)
      if (!isNaN(serverID)) {
        this.listLoading = true
        const formData = {
          'serverID': serverID
        }
        getServerDetail(formData).then(response => {
          if (response.status === 200) {
            this.serverForm = response.data
          } else {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })
      }
    }
  },
  methods: {
    
    handleCannel() {
      this.$router.push({ path: 'server' })
    },
    createData() {
      this.listLoading = true

      const _serverForm = this.serverForm
      try {
      _serverForm.status = _serverForm.status.value
      } catch (error) {
      _serverForm.status = 6
      }
      if (_serverForm.ID > 0) {
        _serverForm.serverID = _serverForm.ID
      }
      saveServer(_serverForm).then(response => {
        console.log(response)
        if (response.status === 200) {
          this.$message({
            message: '操作Success',
            type: 'success'
          })
          this.$router.push({ path: 'server' })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },
    handleDelete(row, index) {
      this.$confirm('您确定删除吗？').then(_ => {
        removeServerByID({ 'serverID': row.ID }).then(response => {
          console.log(response)
          if (response.status === 200) {
            this.$notify({
              title: 'Success',
              message: 'Delete Successfully',
              type: 'success',
              duration: 2000
            })
            this.listQuery.start = 1
            this.getList()
          } else {
            this.$notify({
              title: '操作失败',
              message: response.msg,
              type: 'error',
              duration: 2000
            })
          }
        })
      }).catch(_ => {

      })
    },
  }
}
</script>
